<template>
	<div class="ip_input">
		<template v-for="(item, index) in ipAddress">
			<el-input
				maxlength="3"
				v-model="item.value"
				:ref="'ipInput' + index"
				@keyup.native="handleKeyupEvent($event, index)"
				@keypress.native.prevent="handleKeypressEvent($event, index)"
			></el-input>
			<span class="dot" v-if="ipAddress.length !== index + 1">.</span>
		</template>
		<div class="close" v-if="clearable"><i class="el-icon-circle-close" v-show="!!ipAddr" @click="handleClearData"></i></div>
	</div>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	name: 'swIpInput',
	mixins: [emitter],
	props: {
		value: {
			type: String,
			default: ''
		},
		clearable: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			ipAddr: this.value,
			ipAddress: []
		};
	},
	watch: {
		value(val) {
			this.ipAddr = val;
		},
		ipAddr(val) {
			this.$emit('input', val);
			this.dispatch('ElFormItem', 'el.form.change', [val]);
			val.split('.').forEach((item, index) => {
				this.$set(this.ipAddress, index, { value: item });
			});
		},
		ipAddress: {
			handler(arr) {
				let valArr = arr.filter((item) => !!item.value);
				this.ipAddr = valArr.map((item) => item.value).join('.');
			},
			deep: true
		}
	},
	mounted() {
		this.ipAddress = this.ipFormat();
	},
	methods: {
		ipFormat() {
			let arr = [];
			for (let i = 0; i < 4; i++) {
				this.$set(arr, i, { value: '' });
			}
			return arr;
		},
		handleKeyupEvent(e, i) {
			if (e.key === 'Backspace') {
				this.$set(this.ipAddress, i, { value: e.target.value });
				if (!e.target.value && i !== 0) {
					e.target.blur();
					this.$refs['ipInput' + (i - 1)][0].focus();
				}
			}
		},
		handleKeypressEvent(e, i) {
			let value = e.target.value;
			let reg = RegExp('^[0-9]*$');
			if (e.key === '.' && this.ipAddress.length !== i + 1 && !!this.ipAddress[i].value) {
				e.target.blur();
				this.$refs[`ipInput${i + 1}`][0].focus();
			} else if (reg.test(e.key) && value.length < 3 && parseInt(value + e.key) <= 255) {
				this.$set(this.ipAddress, i, { value: value == 0 ? e.key : value + e.key });
			}
		},

		handleClearData() {
			if (!this.value) return false;
			this.ipAddress = this.ipFormat();
		}
	}
};
</script>

<style lang="scss" scoped>
.ip_input {
	display: inline-flex;
	align-items: center;
	width: 100%;
	min-width: 160px;
	border: solid 1px #dcdfe6;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 0;
	&:has(.el-input--large) {
		padding: 0 10px;
		line-height: 38px;
	}
	&:has(.el-input--medium) {
		padding: 0 8px;
		line-height: 34px;
	}
	&:has(.el-input--small) {
		padding: 0 6px;
		line-height: 30px;
	}
	&:has(.el-input--mini) {
		padding: 0 4px;
		line-height: 26px;
	}
	div.close {
		display: flex;
		align-items: center;
		width: 14px;
		height: 100%;
		overflow: hidden;
	}
	span.dot {
		flex-shrink: 0;
		font-size: 14px;
	}
	.el-input::v-deep {
		flex: 1;
		overflow: hidden;
		font-size: 14px;
		.el-input__inner {
			min-width: 30px;
			padding: 0;
			border: none;
			text-align: center;
		}
		&.el-input--large .el-input__inner {
			height: 38px;
			line-height: 38px;
		}

		&.el-input--medium .el-input__inner {
			height: 34px;
			line-height: 34px;
		}

		&.el-input--small .el-input__inner {
			height: 30px;
			line-height: 30px;
		}

		&.el-input--mini .el-input__inner {
			height: 26px;
			line-height: 26px;
		}
	}
	i.el-icon-circle-close {
		color: #909399;
		font-size: 14px;
		cursor: pointer;
		visibility: hidden;
	}
	&:hover {
		i.el-icon-circle-close {
			visibility: visible;
		}
	}
}
</style>
